import React, { memo } from 'react'
import './style.less'
import { Rnd } from "react-rnd";
import { DataSourceResult } from "./DataSourceResult";
import { DataSourceForm } from './DataSourceForm';


export const DataSource = memo(() => {
    return (
        <div style={{ display: 'flex', overflow: 'hidden', flex: 1 ,height: '100%'}} >
        {/* 左侧面板 */}
        <Rnd
          default={{
            x: 0,
            y: 0,
            width: 500, // 初始宽度
            height: '100%', // 高度占满父容器
          }}
          minWidth={370}
          enableResizing={{
            right: true, // 允许从右侧调整宽度
          }}
          disableDragging// 禁止拖动
          bounds="parent" // 限制在父容器内
          resizeHandleWrapperClass="vertical-rnd-wrapper"
          style={{
            background: '#fff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%',
            paddingLeft: 16,
            position: 'relative',
          }}
        >
          <DataSourceForm />
        </Rnd>
        {/* 右侧面板 */}
        <div style={{ flex: 2, paddingLeft: 16, height: '100%', borderLeft: '1px solid #ccc' }}>
          <DataSourceResult />
        </div>
      </div>
    );
})